<template>
  <div class="csInfoContainer">
    <div
      class="csInfoCardContainer"
      v-for="(option, index) in options"
      :key="index"
    >
      <card_b :icon-url="option.icon" :title="option.btn" :info="option.init" />
    </div>
  </div>
</template>

<script setup lang="ts">
import card_b from "@/components/cards/card_b.vue";
import { i18nt } from "@/i18n";

const icons = [
  new URL("@/assets/png/info/icon1.png", import.meta.url).href,
  new URL("@/assets/png/info/icon2.png", import.meta.url).href,
  new URL("@/assets/png/info/icon3.png", import.meta.url).href,
  new URL("@/assets/png/info/icon4.png", import.meta.url).href,
  new URL("@/assets/png/info/icon5.png", import.meta.url).href,
  new URL("@/assets/png/info/icon6.png", import.meta.url).href,
  new URL("@/assets/png/info/icon7.png", import.meta.url).href,
  new URL("@/assets/png/info/icon8.png", import.meta.url).href,
];

const infomsg = i18nt.value.constantsOne;

const msg = [
  { btn: infomsg.info1.btn, initInfo: infomsg.info1.initInfo },
  { btn: infomsg.info2.btn, initInfo: infomsg.info2.initInfo },
  { btn: infomsg.info3.btn, initInfo: infomsg.info3.initInfo },
  { btn: infomsg.info4.btn, initInfo: infomsg.info4.initInfo },
  { btn: infomsg.info5.btn, initInfo: infomsg.info5.initInfo },
  { btn: infomsg.info6.btn, initInfo: infomsg.info6.initInfo },
  { btn: infomsg.info7.btn, initInfo: infomsg.info7.initInfo },
  { btn: infomsg.info8.btn, initInfo: infomsg.info8.initInfo },
];

const options = [
  { icon: icons[0], btn: msg[0].btn, init: msg[0].initInfo },
  { icon: icons[1], btn: msg[1].btn, init: msg[1].initInfo },
  { icon: icons[2], btn: msg[2].btn, init: msg[2].initInfo },
  { icon: icons[3], btn: msg[3].btn, init: msg[3].initInfo },
  { icon: icons[4], btn: msg[4].btn, init: msg[4].initInfo },
  { icon: icons[5], btn: msg[5].btn, init: msg[5].initInfo },
  { icon: icons[6], btn: msg[6].btn, init: msg[6].initInfo },
  { icon: icons[7], btn: msg[7].btn, init: msg[7].initInfo },
];
</script>

<style scoped lang="scss">
.csInfoContainer {
  @include relative_hw(199px, 100%);
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.09);
  border-radius: 4px 4px 4px 4px;
  background: #ffffff;

  .csInfoCardContainer {
    @include rel_cen_hw(199px, 185px);

    &::before {
      content: "";
      position: absolute;
      width: 1px;
      height: 128px;
      background: #dddddd;
      right: 0;
    }

    &:last-child::before {
      content: none; // 去掉最后一个元素的 ::before
    }
  }
}
</style>
